<template>
  <div>
    <h3>房型列表</h3>
    <div>
      房型名称：<input type="text" v-model="info.houseTypeName" />
      房型面积:<input type="text" v-model="info.area1" /> -
      <input type="text" v-model="info.area2" />
      <input type="button" value="查询" class="btn btn-primary" @click="show" />
      <input
        type="button"
        value="重置"
        class="btn btn-primary"
        @click="reset"
      />
      <input
        type="button"
        value="批量删除"
        class="btn btn-danger"
        @click="delAll"
      />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>ID</td>
          <td>房型名称</td>
          <td>面积</td>
          <td>房型图片</td>
          <td>添加时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list" :key="item.Id">
          <td>{{ item.Id }}</td>
          <td>{{ item.HouseTypeName }}</td>
          <td>{{ item.Area }}</td>
          <td><img :src="item.Photo" width="100" height="100" /></td>
          <td>{{ moment(item.CreateTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
          <td>
            <input type="button" value="修改/编辑" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
            <input type="button" value="详情" class="btn btn-info" />
            <input type="button" value="发布" class="btn btn-warning" />
            <input type="button" value="不发布" class="btn btn-success" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

//声明一个变量存储获取列表及查询条件的数据
let info: any = reactive({
  pageIndex: 1,
  pageSize: 2,
  houseTypeName: '',
  area1: '',
  area2: '',
});

//接受后端返回列表数据
let data: any = reactive({
  totalCount: 0,
  totalPage: 0,
  list: [],
});

onMounted(() => {
  getList();
});
//重置
const reset = () => {
  info.houseTypeName = '';
  info.area1 = '';
  info.area2 = '';
};

//显示列表
const show = () => {
  info.pageIndex = 1;
  getList();
};

//获取房型列表
const getList = () => {
  axios({
    url: '/api/Houses/GetHouseTypeList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
